<!DOCTYPE html>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>添加产品</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrapValidator.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/public.css">
<script type="text/javascript" src="${contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/common.js"></script>
<script type="text/javascript" src="${contextPath}/js/bootstrapValidator.min.js"></script>
<style type="text/css">
.col-xs-4 {
	padding-right: 0px;
	padding-left: 0px;
}

.col-xs-2 {
	padding-right: 0px;
	padding-left: 0px;
}

.col-xs-3 {
	padding-right: 0px;
	padding-left: 0px;
}

.col-xs-5 {
	padding-right: 0px;
	padding-left: 0px;
}

.col-xs-7 {
	padding-right: 0px;
	padding-left: 0px;
}

#updateProduct {
	margin-top: 30px;
}
</style>
<body>
	<div class="container-fluid">
		<div class="row">
			<section>
				<form action="${contextPath}/security/updateProduct" method="post" id="updateProduct" name="updateProduct" role="form" class="form-horizontal">
					<input class="hidden" name="orderNumber" id="orderNumber" type="text" value="${requestScope.orderNumber}">
					<input class="hidden" name="id" type="text" value="${requestScope.id}">
					<div class="col-xs-12">
						<div class="input-group">
							<span class="input-group-addon">
								<strong>名称</strong>
							</span>
							<input class="form-control" name="product" type="text" value="${requestScope.product}" placeholder="产品名称" autocomplete="off">
							<div class="input-group-btn">
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									选择产品
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right" id="product">
								</ul>
							</div>
							<!-- /btn-group -->
						</div>
						<!-- /input-group -->
					</div>
					<!-- /.col-lg-6 -->
					<div class="col-xs-12">
						<!-- 规格型号 -->
						<div class="input-group">
							<span class="input-group-addon">
								<strong>型号</strong>
							</span>
							<input class="form-control" name="specification" type="text" value="${requestScope.specification}" placeholder="规格型号" autocomplete="off">
							<div class="input-group-btn">
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									选择型号
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right" id="specification">
								</ul>
							</div>
							<!-- /btn-group -->
						</div>
					</div>
					<div class="col-xs-12">
						<!-- 材质 -->
						<div class="input-group">
							<span class="input-group-addon">
								<strong>材质</strong>
							</span>
							<input class="form-control" name="texture" type="text" value="${requestScope.texture}" placeholder="材质" autocomplete="off">
							<div class="input-group-btn">
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									选择材质
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right" id="texture">
								</ul>
							</div>
							<!-- /btn-group -->
						</div>
					</div>
					<div class="col-xs-12">
						<div class="input-group">
							<span class="input-group-addon">
								<strong>厚度</strong>
							</span>
							<input class="form-control" name="thickness" type="text" value="${requestScope.thickness}" placeholder="厚度" autocomplete="off">
							<div class="input-group-btn">
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									选择厚度
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right" id="thickness">
								</ul>
							</div>
							<!-- /btn-group -->
						</div>
					</div>
					<div class="col-xs-12">
						<div class="input-group">
							<span class="input-group-addon">
								<strong>颜色</strong>
							</span>
							<input class="form-control" name="color" type="text" value="${requestScope.color}" placeholder="颜色" autocomplete="off">
							<div class="input-group-btn">
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									选择颜色
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu pull-right" id="color">
								</ul>
							</div>
							<!-- /btn-group -->
						</div>

					</div>
					<div class="col-xs-12">
						<!-- 数量 -->
						<div class="input-group">
							<span class="input-group-addon">
								<strong>数量</strong>
							</span>
							<input class="form-control" onchange="javascript:autojs();" value="${requestScope.number}" name="number" id="number" type="text" placeholder="数量" autocomplete="off">
						</div>
					</div>
					<div class="col-xs-12">
						<!-- 单价 -->
						<div class="input-group">
							<span class="input-group-addon">
								<strong>单价</strong>
							</span>
							<input class="form-control" onchange="javascript:autojs();" value="${requestScope.unit}" name="unit" id="unit" type="text" placeholder="单价" autocomplete="off">
						</div>
					</div>
					<div class="col-xs-12">
						<!-- 金额 -->
						<div class="input-group">
							<span class="input-group-addon">
								<strong>金额</strong>
							</span>
							<input class="form-control" name="amout" id="amout" type="text" value="${requestScope.amout}" placeholder="金额" autocomplete="off">
						</div>
					</div>
					<div class="col-xs-12">
						<!-- 备注 -->
						<div class="input-group">
							<span class="input-group-addon">
								<strong>备注</strong>
							</span>
							<textarea rows="2" cols="" class="form-control" name="remark" placeholder="备注" autocomplete="off">${requestScope.remark}</textarea>
						</div>
					</div>
					<div class="col-xs-12">
						<c:if test="${sessionScope.usertype!=2}">
							<button type="submit" class="btn-lg btn-success" style="width: 100%" id="add">添加</button>
						</c:if>
					</div>
					<div class="col-xs-12">
						<button type="button" class="btn btn-primary" style="width: 100%" id="close">关闭</button>
					</div>
				</form>
			</section>
		</div>
	</div>
	<script type="text/javascript">
		var autojs = function() {

			var n = $("#number").val();
			var u = $("#unit").val();
			var needPay = parseFloat(n * u);
			//alert(needPay.toFixed(2));
			$("#amout").val(needPay.toFixed(2));
		}

		$(document).ready(function() {
			$("#close").click(function() {
				window.close();
			});
			//======================================================初始化
			//初始化产品名称查询
			$.ajax({
				type : 'POST',
				data : {},
				url : '${contextPath}/security/codeSelectProduct?codeKey=产品名称',
				dataType : 'json',
				success : function(data) {

					$.each(data.list, function(i, item) {
						$("#product").append("<li><a onblur='selectSpecification()'; href='javascript:selectValue(\"product\",\"" + item.codeValue + "\");'>" + item.codeValue + "</a></li>");
					});

				}
			});
			//初始化产品材质查询
			$.ajax({
				type : 'POST',
				data : {},
				url : '${contextPath}/security/codeSelectProduct?codeKey=产品材质',
				dataType : 'json',
				success : function(data) {

					$.each(data.list, function(i, item) {
						$("#texture").append("<li><a href='javascript:selectValue(\"texture\",\"" + item.codeValue + "\");'>" + item.codeValue + "</a></li>");
					});

				}
			});
			//初始化产品厚度查询
			$.ajax({
				type : 'POST',
				data : {},
				url : '${contextPath}/security/codeSelectProduct?codeKey=产品厚度',
				dataType : 'json',
				success : function(data) {

					$.each(data.list, function(i, item) {
						$("#thickness").append("<li><a href='javascript:selectValue(\"thickness\",\"" + item.codeValue + "\");'>" + item.codeValue + "</a></li>");
					});

				}
			});
			//初始化产颜色度查询
			$.ajax({
				type : 'POST',
				data : {},
				url : '${contextPath}/security/codeSelectProduct?codeKey=产品颜色',
				dataType : 'json',
				success : function(data) {

					$.each(data.list, function(i, item) {
						$("#color").append("<li><a href='javascript:selectValue(\"color\",\"" + item.codeValue + "\");'>" + item.codeValue + "</a></li>");
					});

				}
			});
			selectValue = function(d, e) {
				$("input[name=" + d + "]").val(e);
			}
			selectSpecification = function(e) {
				$("#specification").empty();
				var v = $("input[name=product]").val();
				$.ajax({
					type : 'POST',
					data : {},
					url : '${contextPath}/security/codeSelectProduct?codeKey=' + v,
					dataType : 'json',
					success : function(data) {

						$.each(data.list, function(i, item) {
							$("#specification").append("<li><a href='javascript:selectValue(\"specification\",\"" + item.codeValue + "\");'>" + item.codeValue + "</a></li>");
						});

					}
				});
			}
			//==================================================================================================================
			//==================================================================================================================
			$('#updateProduct').bootstrapValidator({
				live : 'enabled',
				submitButtons : 'button[type="submit"]',
				message : 'This value is not valid',
				feedbackIcons : {
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {
					product : {
						validators : {
							notEmpty : {
								message : '产品名称不能为空'
							}
						}

					},
					number : {
						validators : {
							notEmpty : {
								message : '数量不能为空'
							},
							digits : {
								message : '只能输入正整数'
							}
						}

					},
					unit : {
						validators : {
							notEmpty : {
								message : '单价不能为空'
							},
							numeric : {
								message : '只能输入数字'
							}
						}

					},
					amout : {
						validators : {
							notEmpty : {
								message : '合计金额不能为空'
							},
							numeric : {
								message : '只能输入数字'
							}
						}

					},
				}
			});

			//$('#addCustomer').bootstrapValidator();
			$('#add').click(function() {
				var bootstrapValidator = $('#updateProduct').data('bootstrapValidator');
				//手动触发验证
				bootstrapValidator.validate();
				if (bootstrapValidator.isValid()) {
					//表单提交的方法、比如ajax提交
					updateProduct.submit();
				}

			});

		});
	</script>
</body>
</html>

